<!-- 创建相册 -->
<template>
  <a-modal
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="visible = false"
    :maskClosable="false"
    width="50%"
    destroyOnClose
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="相册名称" prop="name">
        <a-input v-model="form.name" :maxLength="30"></a-input>
      </a-form-model-item>
      <a-form-model-item label="相册描述">
        <!-- <a-input v-model="form.desc" type="textarea"></a-input> -->
        <a-textarea v-model="form.desc" :rows="15" :maxLength="900" />相册描述字数限制：{{
          form.desc ? form.desc.length : 0 + '/900'
        }}
      </a-form-model-item>
      <a-form-model-item label="相册分组" prop="belongId">
        <a-select v-model="form.belongId">
          <template v-for="item in groupList">
            <a-select-option v-if="item.id != undefined" :value="item.id" :key="item.id">{{
              item.name
            }}</a-select-option>
          </template>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="发布时间" prop="publishTime">
        <a-date-picker v-model="form.publishTime" valueFormat="YYYY-MM-DD" />
      </a-form-model-item>
      <a-form-model-item label="相册封面" prop="originalCoverUrl">
        <UploadImg v-model="form.originalCoverUrl" :width="125" :height="100" cropper :cropperEnlarge="3">
          <template #tips> 500*400 </template>
        </UploadImg>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addPhotoAlbum, editPhotoAlbum } from '@/api/content/operate'
import { mapActions, mapGetters } from 'vuex'
import UploadImg from '@/components/UpFile/uploadImg'
import { getImagePathSmall } from '@/utils/common'

export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visible: false,
      type: 'add',
      title: '创建相册',
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      form: {
        id: undefined,
        name: undefined,
        desc: undefined,
        coverUrl: undefined,
        originalCoverUrl: undefined,
        belongId: 0,
        openState: 0,
        publishTime: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入相册名称', trigger: 'blur' }],
        belongId: [{ required: true, message: '请选择相册分组', trigger: 'change' }],
        publishTime: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
        originalCoverUrl: [{ required: true, message: '请选择相册封面', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['belongId', 'groupList'])
  },
  watch: {},
  methods: {
    ...mapActions(['GetPhotoAlbum', 'GetPhotoAlbumDetail']),
    show(obj) {
      let { type, title, data } = obj
      this.type = type
      this.title = title
      Object.keys(this.form).forEach(k => {
        this.form[k] = type === 'edit' ? data[k] : undefined
      })
      if (type === 'add') {
        this.form.belongId = this.belongId
      }
      this.visible = true
    },
    handleOk() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.form.coverUrl = getImagePathSmall(this.form.originalCoverUrl)
          console.log(this.form)
          let res = {}
          if (this.type === 'add') {
            res = await addPhotoAlbum({ ...this.form, openState: 0 })
          } else {
            res = await editPhotoAlbum({ ...this.form, openState: 0 })
          }
          let { code, msg } = res
          this.$message[code === 0 ? 'success' : 'error'](msg)
          if (code === 0) {
            this.visible = false

            if (this.type === 'add') this.GetPhotoAlbum()
            else this.GetPhotoAlbumDetail()
          }
        }
      })
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped></style>
